<template>
  <div class="login-container">
    <div class="login-box">
      <h2>爱吃兔登录</h2>
      <form @submit.prevent="">
        <div class="input-group">
          <label for="username">账号</label>
          <input type="text" id="username" v-model="from.userName" required />
        </div>
        <div class="input-group">
          <label for="password">密码</label>
          <input type="password" id="password" v-model="from.userPass" required />
        </div>
        <button type="submit" @click="login">登录</button>
      </form>
    </div>
  </div>
</template>



<script setup lang="ts">

import { ref,reactive,onMounted} from 'vue';
import axiox from 'axios';
import { ElMessage } from 'element-plus';
import {useCounterStore} from '@/stores/counter';
import router from '@/router';
const Store = useCounterStore();

const from = reactive({
  userName: '',
  userPass: ''
})

const login = () => {
axiox.get("https://localhost:44393/api/one/Login",{
  params:{
    userName:from.userName,
    userPass:from.userPass
  } 
}).then(res=>{
  if(res.data.code == 100){
    Store.MapPiain.userId = res.data.data[0].userId;
    Store.MapPiain.userName = res.data.data[0].userName;
    Store.MapPiain.userPass = res.data.data[0].userPass;
    Store.MapPiain.roleId=res.data.data[0].roleId;
    Store.MapPiain.roleName=res.data.data[0].roleName;
    Store.MapPiain.userNickname=res.data.data[0].userNickname;
    console.log(res);
    ElMessage.success(res.data.message);
    router.push('/Detail');
    return;
  }
  else
  {
    ElMessage.error(res.data.message);
  }
}).catch(err=>{
  ElMessage.error(err);
})
}


</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.login-box {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  width: 300px;
  text-align: center;
}

h2 {
  margin-bottom: 1.5rem;
}

.input-group {
  margin-bottom: 1rem;
  text-align: left;
}

label {
  display: block;
  margin-bottom: 0.5rem;
}

input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  background-color: #007bff;
  color: white;
  font-size: 1rem;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>